<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '推广二维码',
    enablePullDownRefresh: false,
  },
}
</route>
<template>
  <view class="page">
    <k-navbar title="推广二维码" arrowColor="#fff" :fixed="true" :placeholder="true"></k-navbar>
    <view class="px-[54rpx] mt-[60rpx]" v-if="!loading">
      <view class="text-[46rpx]">推荐赚取佣金</view>
      <view class="text-[#999999] text-[26rpx] mt-[12rpx]">邀请成功，拿现金红包</view>

      <view class="qrcode">
        <view class="slogan">
          <text class="relative z-10">{{ data.config.slogan }}</text>
        </view>
        <view
          class="p-5 w-[462rpx] h-[462rpx] border-[6rpx] border-solid border-[#F4F4F4] rounded-[20rpx] mt-7"
        >
          <wd-img width="100%" height="100%" :src="formatUrl(qrcode.qr_code)"></wd-img>
        </view>
      </view>

      <view class="mt-7 flex flex-col items-center gap-y-[20rpx]">
        <wd-img width="280rpx" height="78rpx" src="/static/logo-white.png"></wd-img>
        <wd-img height="60rpx" width="390rpx" src="/static/title_long-white.png"></wd-img>
      </view>

      <view class="w-[390rpx] mx-auto mt-[112rpx]">
        <wd-button :block="true" :round="false" @click="downloadImage">下载保存至相册</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { fetchInviteConfig, fetchInviteQrcode } from '@/service/index'
import useRequest from '@/hooks/useRequest'
import { formatUrl } from '@/utils/format'
import { uniSaveImage, showToast, openAuthorize, getImageBlobUrl } from '@/utils/uni'

const state = ref({
  tempFilePath: '',
})
const { data, loading } = useRequest(fetchInviteConfig, { immediate: true })
const { data: qrcode } = useRequest(fetchInviteQrcode, { immediate: true })

function saveImage(path) {
  uniSaveImage(path)
    .then((res) => {
      showToast('保存成功')
    })
    .catch((err) => {
      console.log(err, '保存失败')
      if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
        openAuthorize('writePhotosAlbum', () => {
          saveImage(path)
        })
      }
    })
}
function downloadImage() {
  if (state.value.tempFilePath) {
    saveImage(state.value.tempFilePath)
  } else {
    getImageBlobUrl(formatUrl(qrcode.value.qr_code)).then((path) => {
      state.value.tempFilePath = path
      saveImage(path)
    })
  }
}
</script>

<style lang="scss" scoped>
.page {
  @apply bg-primary text-white pb-4;
  min-height: 100vh;
  --wot-navbar-color: #fff;
  --wot-button-primary-bg-color: #4e4e4e;
  --wot-navbar-background: var(--wot-color-theme);

  .qrcode {
    @apply flex flex-col items-center relative bg-white;
    height: 740rpx;
    margin-top: 90rpx;
    border-radius: 50rpx;

    .slogan {
      @apply text-base font-bold mt-5 relative;
      margin-left: -36rpx;
      font-size: 36rpx;

      &::before {
        @apply w-full absolute -left-3 bottom-0;
        height: 30rpx;
        content: '';
        background: linear-gradient(90deg, rgba(1, 1, 1, 0.1) 0%, rgba(1, 1, 1, 0) 100%);
        border-radius: 0rpx 0rpx 0rpx 0rpx;
      }
    }

    &::after,
    &::before {
      @apply bg-primary rounded-1/2 absolute top-1/2 transform -translate-y-1/2;
      width: 50rpx;
      height: 50rpx;
      content: '';
    }

    &::before {
      left: -25rpx;
    }

    &::after {
      right: -25rpx;
    }
  }
}
</style>
